<script setup>

</script>

<template>
  <van-row class="user-info" align="center">
    <!-- 头像 -->
    <van-image src="/src/assets/images/avatar_default.png" round width="100" height="100" />
    <!-- 登录按钮 -->
    <RouterLink :to="{ name: 'login' }">
      <span class="user-info-name">登录</span>
    </RouterLink>
    <span class="user-info-name">|</span>
    <!-- 注册按钮 -->
    <RouterLink :to="{ name: 'register' }">
      <span class="user-info-name">注册</span>
    </RouterLink>
  </van-row>

  <!-- 按钮列表 -->
  <van-row class="user-links">
    <van-col span="6">
      <van-icon name="pending-payment" size="30" />
      <div class="text">待付款</div>
    </van-col>
    <van-col span="6">
      <van-icon name="records-o" size="30" />
      <div class="text">待收货</div>
    </van-col>
    <van-col span="6">
      <van-icon name="tosend" size="30" />
      <div class="text">待评价</div>
    </van-col>
    <van-col span="6">
      <van-icon name="after-sale" size="30" />
      <div class="text">退款/售后</div>
    </van-col>
  </van-row>

  <!-- 订单相关 -->
  <van-cell-group>
    <van-cell icon="records-o" title="全部订单" is-link />
    <van-cell icon="points" title="我的积分" is-link />
    <van-cell icon="gift-o" title="我的红包" is-link />
    <van-cell icon="service-o" title="联系客服" is-link />
  </van-cell-group>
</template>

<style lang="scss" scoped>
.user-info {
  padding: 15px;
  background: url(@/assets/images/user_head_bg.png) no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  .user-info-name {
    display: inline-block;
    color: white;
    font-size: 16px;
  }
}

.user-links {
  padding: 15px 0;
  font-size: 14px;
  text-align: center;
  background: #fff;

  .van-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .text {
      margin-top: 5px;
      font-size: 12px;
      color: #333;
    }
  }
}
</style>
